.goods-manage-container {
	min-height: 100vh;
	background-color: #f5f6fa;
	
	.search-filter {
		padding: 20rpx 30rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		gap: 20rpx;
		
		.search-box {
			flex: 1;
			display: flex;
			align-items: center;
			background-color: #f5f6fa;
			padding: 15rpx 30rpx;
			border-radius: 40rpx;
			
			input {
				flex: 1;
				margin-left: 20rpx;
				font-size: 28rpx;
			}
		}
		
		.filter-btn {
			display: flex;
			align-items: center;
			gap: 10rpx;
			font-size: 28rpx;
			color: #666;
		}
	}
	
	.status-tabs {
		display: flex;
		background-color: #fff;
		padding: 0 20rpx;
		border-bottom: 1rpx solid #eee;
		margin-top: 2rpx;
		
		.tab-item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20rpx 0;
			font-size: 28rpx;
			color: #666;
			position: relative;
			
			.count {
				font-size: 24rpx;
				margin-left: 4rpx;
			}
			
			&.active {
				color: #2979ff;
				font-weight: 500;
				
				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 40rpx;
					height: 4rpx;
					background-color: #2979ff;
					border-radius: 2rpx;
				}
			}
		}
	}
	
	.goods-list {
		height: calc(100vh - 200rpx);
		padding: 20rpx;
		
		.goods-item {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 24rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
			
			.goods-basic {
				display: flex;
				
				.goods-image {
					width: 180rpx;
					height: 180rpx;
					border-radius: 12rpx;
					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
				}
				
				.goods-info {
					flex: 1;
					margin-left: 24rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					min-width: 0;
					
					.goods-name {
						font-size: 28rpx;
						color: #333;
						margin-bottom: 12rpx;
						font-weight: 500;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					
					.goods-price {
						margin-bottom: 12rpx;
						
						.price {
							color: #ff5500;
							font-size: 36rpx;
							font-weight: bold;
							
							&::before {
								content: '¥';
								font-size: 24rpx;
								margin-right: 2rpx;
							}
						}
						
						.points {
							color: #ff9500;
							font-size: 36rpx;
							font-weight: bold;
						}
					}
					
					.goods-status {
						display: flex;
						gap: 12rpx;
						flex-wrap: wrap;
						
						.status-tag, .audit-tag {
							padding: 6rpx 16rpx;
							border-radius: 6rpx;
							font-size: 24rpx;
							font-weight: 500;
						}
						
						.on-shelf {
							background-color: #e6f3ff;
							color: #2979ff;
						}
						
						.off-shelf {
							background-color: #f5f5f5;
							color: #999;
						}
						
						.pending {
							background-color: #fff7e6;
							color: #ff9500;
						}
						
						.approved {
							background-color: #e6fff0;
							color: #19be6b;
						}
						
						.rejected {
							background-color: #ffe6e6;
							color: #ff3333;
						}
					}
				}
			}
			
			.goods-data {
				display: flex;
				padding: 24rpx 0;
				border-top: 1rpx solid #f5f5f5;
				margin-top: 24rpx;
				
				.data-item {
					flex: 1;
					text-align: center;
					position: relative;
					
					&:first-child::after {
						content: '';
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
						width: 2rpx;
						height: 40rpx;
						background-color: #f5f5f5;
					}
					
					.label {
						font-size: 24rpx;
						color: $mall-text-200;
						margin-bottom: 8rpx;
					}
					
					.value {
						font-size: 32rpx;
						color: $mall-text-100;
						font-weight: bold;
						
						&.formatted {
							letter-spacing: 2rpx;
						}
					}
				}
			}
			
			.action-buttons {
				display: flex;
				justify-content: flex-end;
				gap: 16rpx;
				margin-top: 24rpx;
				padding-top: 24rpx;
				border-top: 1rpx solid #f5f5f5;
				
				.btn {
					display: block;
					min-width: 120rpx;
					font-size: 26rpx;
					padding: 8rpx 18rpx;
					border-radius: 28rpx;
					font-weight: 500;
					text-align: center;
					transition: all 0.3s ease;
					
					&.outline {
						background-color: #fff;
						color: $mall-primary-100;
						border: 2rpx solid $mall-primary-100;
						
						&:active {
							background-color: rgba($mall-primary-100, 0.05);
						}
					}
					
					&:not(.outline):not(.danger) {
						background: linear-gradient(135deg, $mall-primary-100, $mall-primary-200);
						color: #fff;
						border: none;
						box-shadow: 0 4rpx 8rpx rgba($mall-primary-100, 0.2);
					}
					
					&.danger {
						background: linear-gradient(135deg, #ff4d4d, #ff6666);
						color: #fff;
						border: none;
						box-shadow: 0 4rpx 8rpx rgba(#ff4d4d, 0.2);
					}
					
					&:active {
						opacity: 0.9;
						transform: translateY(2rpx);
						box-shadow: 0 2rpx 4rpx rgba($mall-primary-100, 0.15);
					}
					
					&:disabled {
						opacity: 0.5;
						cursor: not-allowed;
						background: #ccc !important;
						color: #999 !important;
						border: none !important;
						box-shadow: none !important;
						
						&:active {
							transform: none;
							opacity: 0.5;
						}
					}
				}
			}
			
			&:active {
				transform: scale(0.99);
				transition: transform 0.2s;
			}
		}
	}
}

.edit-popup {
	background-color: #fff;
	border-radius: 24rpx 24rpx 0 0;
	
	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
		font-size: 32rpx;
		font-weight: 500;
	}
	
	.edit-content {
		max-height: 800rpx;
		padding: 30rpx;
		
		.form-item {
			margin-bottom: 30rpx;
			
			.label {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 20rpx;
				display: block;
			}
			
			input {
				width: 100%;
				height: 80rpx;
				background-color: #f5f6fa;
				border-radius: 8rpx;
				padding: 0 20rpx;
				font-size: 28rpx;
			}
			
			.picker-value {
				width: 100%;
				height: 80rpx;
				background-color: #f5f6fa;
				border-radius: 8rpx;
				padding: 0 20rpx;
				font-size: 28rpx;
				line-height: 80rpx;
				color: #333;
			}
			
			.image-list {
				display: flex;
				flex-wrap: wrap;
				gap: 20rpx;
				
				.image-item {
					width: 160rpx;
					height: 160rpx;
					position: relative;
					
					image {
						width: 100%;
						height: 100%;
						border-radius: 8rpx;
					}
					
					.delete-btn {
						position: absolute;
						top: -10rpx;
						right: -10rpx;
						width: 40rpx;
						height: 40rpx;
						background-color: rgba(0,0,0,0.5);
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
				
				.upload-btn {
					width: 160rpx;
					height: 160rpx;
					background-color: #f5f6fa;
					border-radius: 8rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1rpx dashed #ddd;
				}
			}
		}
	}
	
	.popup-footer {
		padding: 30rpx;
		display: flex;
		gap: 20rpx;
		border-top: 1rpx solid #eee;
		
		.btn {
			flex: 1;
			height: 80rpx;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			
			&.outline {
				background-color: #fff;
				color: #666;
				border: 1rpx solid #ddd;
			}
			
			&:not(.outline) {
				background-color: #2979ff;
				color: #fff;
			}
		}
	}
}

.payment-type-alert {
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx;
	background-color: #edf5ff;
	margin-bottom: 2rpx;
	
	text {
		font-size: 26rpx;
		color: #2979ff;
		margin-left: 10rpx;
		flex: 1;
	}
}
